<!--板块模块-->
<template>
  <div class="panel-container">
    <!-- 固定标题栏 -->
    <t-navbar
      title="板块"
      left-arrow
      @click-left="handleBack"
      class="navbar-fixed"
    >
    </t-navbar>

    <!-- 内容区 -->
    <div class="content-wrapper">
      <!-- 轮播图 -->
      <div class="swiper-wrapper">
        <t-swiper 
          :autoplay="true" 
          height="192px" 
          :navigation="{ type: 'dots-bar' }" 
          @change="handleChange"
        >
          <t-swiper-item v-for="(item, index) in swiperList" :key="index">
            <img :src="item" class="swiper-image" />
          </t-swiper-item>
        </t-swiper>
      </div>

      <!-- 九宫格（仅显示标题） -->
      <div class="cards-grid">
        <div 
          v-for="item in cardItems"
          :key="item.id"
          class="card-item"
          @click="handleCardClick(item)"
        >
          <div class="card-left">
            <div class="card-icon-wrapper">
              <t-icon :name="item.icon" class="card-icon" />
              <t-badge 
                v-if="item.badge"
                :count="item.badge"
                :dot="typeof item.badge === 'string'"
                class="card-badge"
              />
            </div>
          </div>
          <div class="card-right">
            <h3 class="card-title">{{ item.title }}</h3>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script setup lang="ts">
import { ref } from 'vue';
import { 
  Navbar as TNavbar,
  Icon as TIcon,
  Badge as TBadge,
  Toast,
  Swiper as TSwiper,
  SwiperItem as TSwiperItem
} from 'tdesign-mobile-vue';

interface CardItem {
  id: number;
  icon: string;
  title: string;
  badge?: string | number;
}

// 轮播图数据
const imageCdn = 'https://tdesign.gtimg.com/mobile/demos';
const swiperList = [
  `${imageCdn}/swiper1.png`,
  `${imageCdn}/swiper2.png`,
  `${imageCdn}/swiper1.png`,
  `${imageCdn}/swiper2.png`,
  `${imageCdn}/swiper1.png`,
];

// 九宫格数据（移除了description字段）
const cardItems = ref<CardItem[]>([
  { id: 1, icon: 'app', title: '应用中心', badge: 'New' },
  { id: 2, icon: 'user', title: '个人中心' },
  { id: 3, icon: 'setting', title: '系统设置', badge: 3 },
  { id: 4, icon: 'image', title: '相册' },
  { id: 5, icon: 'mail', title: '消息', badge: 12 },
  { id: 6, icon: 'calendar', title: '日程' },
  { id: 7, icon: 'location', title: '位置' },
  { id: 8, icon: 'star', title: '收藏' },
  { id: 9, icon: 'help', title: '帮助中心' }
]);

const handleChange = (index: number) => {
  console.log('轮播图切换至:', index);
};

const handleCardClick = (item: CardItem) => {
  Toast({
    message: `进入${item.title}`,
    duration: 1500,
    icon: 'app'
  });
};

const handleBack = () => history.back();
// 删除未使用的handleMoreClick函数
</script>


<style scoped>
/* 基础布局 */
.panel-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f7f8fa;
  position: relative;
}

/* 固定标题栏 */
.navbar-fixed {
  --td-navbar-height: 48px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background-color: var(--td-brand-color);
}

.navbar-fixed :deep(.t-navbar__title) {
  color: white;
}

/* 内容容器 */
.content-wrapper {
  margin-top: 48px; /* 标题栏高度 */
  padding-bottom: 16px;
  flex: 1;
  overflow-y: auto;
}

/* 轮播图容器 */
.swiper-wrapper {
  padding: 0 16px;
  margin-bottom: 16px;
}

.swiper-image {
  width: 100%;
  height: 192px;
  object-fit: cover;
  border-radius: 8px;
}

/* 九宫格布局 */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 0 16px;
}

/* 卡片样式（简化版） */
.card-item {
  background: white;
  border-radius: 12px;
  padding: 12px;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.05);
  min-height: 20px;
}

.card-left {
  margin-right: 12px;
  display: flex;
  align-items: center;
}

.card-icon-wrapper {
  position: relative;
}

.card-icon {
  font-size: 24px;
  color: var(--td-brand-color);
}

.card-badge {
  position: absolute;
  top: -8px;
  right: -8px;
}

.card-right {
  flex: 1;
}

.card-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  text-align: left;
  line-height: 1.4;
}

/* 响应式调整 */
@media (max-width: 600px) {
  .swiper-image {
    height: 160px;
  }
  
  .cards-grid {
    gap: 8px;
  }
  
  .card-item {
    padding: 10px;
    min-height: 30px;
  }
  
  .card-icon {
    font-size: 20px;
  }
  
  .card-title {
    font-size: 14px;
  }
  
  .card-left {
    margin-right: 8px;
  }
}
</style>